<template>
  <div>
    <div class="c-header">{{ title }}</div>
    <div class="c-content">
      <CFormDetailGroup
        ref="detailRef"
        :isEdit="isEdit"
        v-model="formData"
        :formConfig="formConfig"
        @validate="submit"
        :loading="submitLoading"
      >
        <CFormDetail
          ref="refProduct"
          icon="c-xian-11"
          title="产品信息"
          desc="请填写需追溯碳足迹的产品信息，平台将基于产品信息建立对应的碳足迹核算模型"
          :schemas="schemasProduct"
        >
          <template #tipCode>
            <el-popover placement="right" :width="400" trigger="hover">
              <template #reference>
                <CIcon type="c-xian-shuoming" class="jinggao-icon-style"></CIcon>
              </template>
              <p class="g-font-12n2">1、整车类型需填写车型公告号，将通过该编码加载整车BOM数据。</p>
              <p class="g-font-12n2 g-mt2">2、零部件类型填写零件号，该模型可被整车模型关联引用。</p>
            </el-popover>
          </template>
          <template #address>
            <el-form-item prop="manufactureCountry" style="width: 120px">
              <CSelect v-model="formData.manufactureCountry" placeholder="国家" filterable>
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in countryOptions"
                  :key="index"
                ></el-option>
              </CSelect>
            </el-form-item>
            <el-form-item prop="manufactureAddress" style="width: 480px" class="g-ml8">
              <el-input
                clearable
                v-model="formData.manufactureAddress"
                placeholder="请输入详细地址"
              />
            </el-form-item>
          </template>
        </CFormDetail>
        <CFormDetail
          ref="refInfo"
          icon="c-xian-21"
          title="核算信息"
          desc="选择产品的核算标准及范围，填写核算的基础参数"
          :schemas="schemasInfo"
        >
          <template #tip>
            <el-popover placement="right" :width="400" trigger="hover">
              <template #reference>
                <CIcon type="c-xian-shuoming" class="jinggao-icon-style"></CIcon>
              </template>

              <p class="g-font-12n1b g-mb8">用于计算产品实现单位功能的碳排放，示例：</p>
              <div class="g-font-12n2 g-flex g-mt2"
                ><div class="title-width">1、</div>
                以乘用车为例：1pcs*150000km，即1辆整车行驶15万公里，结果以每km所产生的碳排放计量。
              </div>
              <div class="g-font-12n2 g-flex g-mt2"
                ><div class="title-width">2、</div
                >以轻型货车为例：3.5t*600000km，即核载吨位3.5t的货车行驶60万公里，结果以每t·km所产生的碳排放计量。</div
              >
              <div class="g-font-12n2 g-flex g-mt2"
                ><div class="title-width">3、</div
                >以客车为例：20person*400000km，即核载人数20人的客车行驶40万公里，结果以每person·km所产生的碳排放计量。</div
              >
              <div class="g-font-12n2 g-flex g-mt2"
                ><div class="title-width">4、</div
                >以电池包为例：1pcs*75kWh，即1个75度电量的电池包，结果以每kWh所产生的碳排放计量。</div
              >
              <div class="g-font-12n2 g-flex g-mt2"
                ><div class="title-width">5、</div
                >以其他零部件为例：1pcs*1unit，即核算单个零部件的碳足迹，结果以生命周期碳排放总量计量。</div
              >
            </el-popover>
          </template>
          <template #flow>
            <el-form-item prop="num">
              <el-input
                class="form-item-base"
                v-model="formData.num"
                placeholder="请输入核算数量"
                maxlength="19"
                v-positive-only:6
                type="number"
                @wheel.stop.prevent
              >
                <template #append>
                  <CSelect v-model="formData.unit" style="width: 120px">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in pcsUnitOption"
                      :key="item.value"
                    ></el-option>
                  </CSelect>
                </template>
              </el-input>
            </el-form-item>
            <span class="separator">*</span>
            <el-form-item prop="referenceFlowValue">
              <el-input
                placeholder="请输入"
                class="form-item-base"
                v-model="formData.referenceFlowValue"
                maxlength="19"
                v-positive-only:6
                type="number"
                @wheel.stop.prevent
              >
                <template #append>
                  <CSelect v-model="formData.referenceFlowUnit" style="width: 120px">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in flowUnitOption"
                      :key="item.value"
                    ></el-option>
                  </CSelect>
                </template>
              </el-input>
            </el-form-item>
          </template>
        </CFormDetail>
        <CFormDetail icon="c-xian-31" title="补充信息" desc="" :schemas="schemasOther">
          <template #tags>
            <div>
              <el-input
                class="tag-wrap"
                ref="InputRef"
                v-model="inputValue"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
                maxlength="6"
                placeholder="请输入"
              >
                <template #prefix>
                  <div>
                    <el-tag
                      type="info"
                      closable
                      @close="handleClose(item)"
                      v-for="(item, index) in formData.tags"
                      :key="index"
                      >{{ item }}</el-tag
                    >
                  </div>
                </template>
              </el-input>
              <p class="g-font-12n3 g-mt4">
                可创建标签便于分类检索，每个模型支持创建最多 5 个标签，每个标签可输入 6 个字
              </p>
            </div>
          </template>
        </CFormDetail>
      </CFormDetailGroup>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'AddModel'
};
</script>
<script lang="ts" setup>
import { CFormDetail, CFormDetailGroup } from '@/components/CFormDetail/index';
import { useDetail } from './useDetail';
import { useTag } from './useTag';
import { CSelect } from '@/components/CSelect';
import { countryOptions, flowUnitOption, pcsUnitOption } from '@/constants/enum';
const {
  schemasProduct,
  schemasInfo,
  schemasOther,
  formConfig,
  formData,
  title,
  isEdit,
  submit,
  submitLoading,
  refProduct,
  refInfo,
  detailRef
} = useDetail();
const { handleInputConfirm, handleClose, InputRef, inputValue } = useTag(formData);
</script>

<style lang="scss" scoped>
.separator {
  font-size: 14px;
  font-weight: 400;
  color: #7a8a99;
  line-height: 32px;
  height: 32px;
  margin: 0 8px;
}
.tag-wrap {
  width: 640px;
  :deep(.el-input__wrapper) {
    padding-left: 4px;
  }
  :deep(.el-tag + .el-tag) {
    margin-left: 4px;
  }
  :deep(.el-tag) {
    height: 24px;
  }
}
.c-content {
  padding: 4px 0 64px;
}
.title-width {
  width: 20px;
}
.jinggao-icon-style {
  color: #96a7b3;
  &:hover {
    color: #435970;
  }
}
</style>
